<template>
    <el-menu active-text-color="#ffd04b" background-color="#546de0" class="el-menu-vertical-demo" default-active="1"
        text-color="#fff">
        <template v-for="(item, index) in routes">
            <el-sub-menu :index="String(index)" v-if="item.children && item.children.length > 0">
                <template #title>{{ item.name }}</template>
                <el-menu-item-group v-for="(child, childIndex) in item.children">
                    <el-menu-item :index="`${index}-${childIndex}`" @click="handleSelect(`${item.path}/${child.path}`)"
                        v-if="!item.isHidden">{{
                            child.name
                        }}</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item :index="String(index)" @click="handleSelect(item.path)"
                v-if="!item.children && !item.isHidden">
                <div class="menu-item-div">
                    <el-icon><icon-menu /></el-icon>
                    <span>{{ item.name }}</span>
                </div>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
// import routes from '../router/index'
import { ref, } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter();

const routes = JSON.parse(localStorage.getItem('menuInfo'))




// const menuList = ref(indexNav)
const activeIndex = ref('1')

const handleSelect = (path) => {
    router.push(path)

}

</script>
<style lang="scss" scoped>
// .menu-item-div {
//     background-color: #fff;
//     margin: 10px;
//     border-radius: 5px;
// }</style>